<template>
	<view class="page" :style="themeColor">
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex myInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between myInformation_fd0_0'>
				<view class='flex flex-wrap align-center myInformation_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  myInformation_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='myInformation_fd0_0_c1_c0'>我的资料</text>
				</view>
				<view class='flex align-center justify-end myInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="flex flex-direction flex-wrap align-stretch myInformation_flex_1">
			<view class='flex flex-wrap align-center justify-between myInformation_fd1_0'>
				<text class='myInformation_fd1_0_c0'>头像</text>
				<view class='flex flex-wrap align-center'>
					<view class="upload position-relative">

						<image class=" myInformation_fd1_0_c1_c0_image" mode="aspectFit"
							@tap="croppingUploadImage('head_img','head_img',dataDetails,dataDetails)"
							:src="dataDetails.head_img ? dataDetails.head_img : STATIC_URL+'86.png'"></image>
					</view>
				</view>
			</view>
			<view class='flex flex-wrap align-center justify-between myInformation_fd1_1'>
				<text class='myInformation_fd1_1_c0'>ID</text>
				<text class='myInformation_fd1_1_c1'>{{dataDetails.id}}</text>
			</view>
			<view class='flex flex-wrap align-center myInformation_fd1_2'>
				<text class='myInformation_fd1_2_c0'>昵称</text>
				<input class='flex-sub myInformation_fd1_2_c1' type="text" placeholder="请输入昵称" confirm-type="done"
					:maxlength="-1" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="dataDetails.user_nickname" />
			</view>
			<view class='flex flex-wrap align-center myInformation_fd1_3' @tap.stop="pickerDiy1657243339232=true">
				<text class='myInformation_fd1_3_c0'>性别</text>
				<input class='flex-sub myInformation_fd1_3_c1' type="text" placeholder="请选择性别" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="sex_name" />
				<image class='myInformation_fd1_3_c2' mode="aspectFit" :src='STATIC_URL+"89.png"'></image>
			</view>
			<view class='flex flex-wrap align-center myInformation_fd1_4' @tap.stop="pickerDiy1657244152337=true">
				<text class='myInformation_fd1_4_c0'>生日</text>
				<input class='flex-sub myInformation_fd1_4_c1' type="text" placeholder="请选择生日" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="dataDetails.birthday" />
				<image class='myInformation_fd1_4_c2' mode="aspectFit" :src='STATIC_URL+"89.png"'></image>
			</view>
		</view>

		<view class="flex benben-position-layout flex flex-wrap align-center myInformation_flex_2">
			<button class='myInformation_fd2_0' @tap.stop="sumbitFunc()">保存</button>

		</view>
		<view :style="{height: '100rpx'}"></view>
		<!--选择性别开始 -->
		<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1657243339232" :label.sync='sex_name'
			:value.sync='dataDetails.sex' :options='sex_type' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myInformation_picker3_0'>
					<text class='myInformation_picker3_0_c0'
						@tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
					<text class='myInformation_picker3_0_c1'>选择性别</text>
					<text class='myInformation_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--选择性别结束 -->
		<!--选择生日开始 -->
		<benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1657244152337"
			:value.sync='dataDetails.birthday' mode='date' :mask-show='true' :timeout='true' :picker-height='88'
			:current='true' fields='day' start-year='1900-1-1' end-year='现在'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myInformation_picker4_0'>
					<text class='myInformation_picker4_0_c0'
						@tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
					<text class='myInformation_picker4_0_c1'>选择生日</text>
					<text class='myInformation_picker4_0_c2'
						@tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--选择生日结束 -->


	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},


		data() {
			return {
				"pickerDiy1657244152337": false,
				"pickerDiy1657243339232": false,
				"sex_type": [{
					"name": "保密",
					"value": "0",
					"image": ""
				}, {
					"name": "男",
					"value": "1",
					"image": ""
				}, {
					"name": "女",
					"value": "2",
					"image": ""
				}],
				"sex_name": "",
				"dataDetails": {
					"invite_code": "",
					"address": "",
					"address_code": "",
					"address_citycode": "",
					"id": "",
					"lastid": "",
					"user_nickname": "",
					"mobile": "",
					"user_name": "",
					"head_img": "",
					"birthday": "",
					"is_finger": "",
					"user_money": "",
					"freeze_money": "",
					"withdrawal_money": "",
					"score": "",
					"empirical": "",
					"invoice_title": "",
					"invoice_company_title": "",
					"total_consumption_money": "",
					"sex": "",
					"create_time": "",
					"phone": "",
					"online": "",
					"_mobile": "",
					"coupon": "",
					"age": "",
					"collection_count": "",
					"browse_count": "",
					"certified": "",
					"invite": []
				},
				"data": {
					"userinfo": {}
				}
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			userInfo: {
				get() {
					return this.$store.state.userInfo
				},
				set() {
					this.$store.commit('updateUserInfo', value)
				},
			}
		},
		watch: {},
		onLoad(options) {
			this.DataDetailsFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//裁剪图片上传
			croppingUploadImage(id, path, obj, obj1, fnName = false) {
				let self = this
				if (global.platform == 'ios') {
					if (!obj) obj = this
					if (!obj1) obj1 = this
					let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']
					
					function imageCroppingCuccess() {
						uni.$once('image-cropping-success', (file) => {
							if (!file) return
							new UploadImage([file], {
								complete: (res) => {
									if (id) self.$set(obj, id, res[0].id)
									if (path) self.$set(obj1, path, res[0].path)
									if (fnName) self[fnName]()
								},
							})
						})
					}
					uni.showActionSheet({
						itemList: itemList,
						success: function(res) {
							if (res.tapIndex == 0 && obj1[path]) {
								uni.navigateTo({
									url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
										obj1[path],
									animationDuration: 0,
								})
								imageCroppingCuccess()
							}
							if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
								uni.chooseImage({
									count: 1,
									sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
									success: (res) => {
										// 跳转到图片裁切页面
										uni.navigateTo({
											url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
											animationDuration: 0,
										})
										imageCroppingCuccess()
									},
								})
							}
							if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
								uni.chooseImage({
									count: 1,
									sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
									sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
									success: (res) => {
										// 跳转到图片裁切页面
										uni.navigateTo({
											url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
											animationDuration: 0,
										})
										imageCroppingCuccess()
									},
								})
							}
						},
						fail: function(res) {
							console.log(res.errMsg)
						},
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '访问您的相机或相册权限，以及存储权限，使用拍照或修改图片等功能，用于上传头像或上传图片，是否允许？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								if (!obj) obj = this
								if (!obj1) obj1 = this
								let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']
								
								function imageCroppingCuccess() {
									uni.$once('image-cropping-success', (file) => {
										if (!file) return
										new UploadImage([file], {
											complete: (res) => {
												if (id) self.$set(obj, id, res[0].id)
												if (path) self.$set(obj1, path, res[0].path)
												if (fnName) self[fnName]()
											},
										})
									})
								}
								uni.showActionSheet({
									itemList: itemList,
									success: function(res) {
										if (res.tapIndex == 0 && obj1[path]) {
											uni.navigateTo({
												url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
													obj1[path],
												animationDuration: 0,
											})
											imageCroppingCuccess()
										}
										if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
											uni.chooseImage({
												count: 1,
												sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
												sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
												success: (res) => {
													// 跳转到图片裁切页面
													uni.navigateTo({
														url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
														animationDuration: 0,
													})
													imageCroppingCuccess()
												},
											})
										}
										if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
											uni.chooseImage({
												count: 1,
												sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
												sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
												success: (res) => {
													// 跳转到图片裁切页面
													uni.navigateTo({
														url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
														animationDuration: 0,
													})
													imageCroppingCuccess()
												},
											})
										}
									},
									fail: function(res) {
										console.log(res.errMsg)
									},
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				}
				
			},
			//获取会员信息
			async DataDetailsFunc() {
				//请求方法
				//数据验证

				let datadataDetails = await this.$api.post(global.apiUrls.post64366f0e3b620, {
					user_id: this.userInfo.id
				});
				if (datadataDetails.data.code != 1) {
					this.$message.info(datadataDetails.data.msg);
					return
				}
				let infodataDetails = datadataDetails.data;
				this.dataDetails = infodataDetails.data
				// console.log(this.dataDetails);
				this.sexFunc()
			},
			//性别赋值
			sexFunc() {
				if (this.dataDetails.sex == '0') {
					this.sex_name = '保密';
					return
				}
				if (this.dataDetails.sex == '1') {
					this.sex_name = '男';
					return
				}
				if (this.dataDetails.sex == '2') {
					this.sex_name = '女';
					return
				}
			},
			//提交
			async sumbitFunc() {
				if (!validate(this.dataDetails.user_nickname, 'require')) {
					this.$message.info('请输入昵称');
					return false;
				}

				if (!validate(this.dataDetails.birthday, 'require')) {
					this.$message.info('请选择生日');
					return false;
				}
				//请求方法
				//数据验证

				let datadata = await this.$api.post(global.apiUrls.post64366f58928d4, {
					head_img: this.dataDetails.head_img,
					user_nickname: this.dataDetails.user_nickname,
					sex: this.dataDetails.sex,
					birthday: this.dataDetails.birthday
				});
				if (datadata.data.code != 1) {
					this.$message.info(datadata.data.msg);
					return
				}
				let infodata = datadata.data;
				this.data = infodata.data
				this.$store.commit('updateUserInfo', this.data.userinfo)
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 800)
				this.$message.info('修改成功');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto !important;
	}

	.myInformation_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myInformation_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 200rpx;
	}

	.myInformation_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.myInformation_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.myInformation_fd0_0_c0 {
		width: 200rpx;
	}

	.myInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.myInformation_flex_1 {
		background: #fff;
		padding: 0rpx 0rpx 0rpx 32rpx;
	}

	.myInformation_fd1_4_c2 {
		width: 14rpx;
		height: 26rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.myInformation_fd1_4_c1 {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		text-align: right;
	}

	.myInformation_fd1_4_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.myInformation_fd1_4 {
		padding: 0rpx 32rpx 0rpx 0rpx;
	}

	.myInformation_fd1_3_c2 {
		width: 14rpx;
		height: 26rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.myInformation_fd1_3_c1 {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		text-align: right;
	}

	.myInformation_fd1_3_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.myInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		padding: 0rpx 32rpx 0rpx 0rpx;
	}

	.myInformation_fd1_2_c1 {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		text-align: right;
	}

	.myInformation_fd1_2_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.myInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		line-height: 110rpx;
		padding: 0rpx 32rpx 0rpx 0rpx;
	}

	.myInformation_fd1_1_c1 {
		color: rgba(102, 102, 102, 1);
		font-size: 32rpx;
		font-style: normal;
	}

	.myInformation_fd1_1_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.myInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		line-height: 110rpx;
		padding: 0rpx 32rpx 0rpx 0rpx;
	}

	.myInformation_fd1_0_c1_c0_image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}

	.myInformation_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.myInformation_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.myInformation_flex_2 {
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.myInformation_fd2_0 {
		background: rgba(255, 255, 255, 1);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 32rpx;
		color: rgba(42, 42, 42, 1);
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: 600;
	}

	.myInformation_picker3_0_c2 {
		color: var(--benbenFontColor0);
		font-size: 32rpx;
		font-weight: 400;
	}

	.myInformation_picker3_0_c1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.myInformation_picker3_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.myInformation_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 100rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.myInformation_picker4_0_c2 {
		color: var(--benbenFontColor0);
		font-size: 32rpx;
		font-weight: 400;
	}

	.myInformation_picker4_0_c1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.myInformation_picker4_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(191, 191, 191, 1);
	}

	.myInformation_picker4_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 110rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}
</style>